<template>
  <a-select style="width: 100%"
            :value="value_"
            :placeholder="placeholder"
            :allowClear="allowClear"
            :showSearch="showSearch"
            :showArrow="showArrow"
            :size="size"
            :mode="mode"
            :notFoundContent="notFoundContent"
            :labelInValue="labelInValue"
            :filterOption="filterOption"
            :disabled="disabled"
            @change="change"
            @blur="blur"
            @deselect="deselect"
            @focus="focus"
            @inputKeydown="inputKeydown"
            @dropdownVisibleChange="dropdownVisibleChange"
            @search="search"
            @popupScroll="popupScroll"
            @mouseenter="mouseenter"
            @mouseleave="mouseleave"
            @select="select">
    <a-select-option v-for="(option) in options"
                     :key="option.id">
      {{ option.name }}
    </a-select-option>
  </a-select>
</template>

<script>
import PropTypes from '@zh/common-utils/prop-types'
import { getApplicationList } from './../api/select'
export default {
  name: 'ZSelectApplication',
  components: {},
  props: {
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
    placeholder: PropTypes.string.def('请选择应用').des('默认提示'),
    mode: PropTypes.string.def('multiple').des('设置 Select 的模式为多选或标签 multiple'),
    allowClear: PropTypes.bool.def(false).des('是否可清空下拉框'),
    disabled: PropTypes.bool.def(false).des('是否禁用'),
    showSearch: PropTypes.bool.def(false).des('是否可搜索'),
    showArrow: PropTypes.bool.def(true).des('是否显示小箭头'),
    labelInValue: PropTypes.bool.def(false).des('是否把每个选项的 label 包装到 value 中'),
    size: PropTypes.string.def('default').des('下拉框大小,默认为default large small'),
    notFoundContent: PropTypes.string.def('暂无数据').des('当下拉列表为空时显示的内容')
  },
  model: {
    value: 'value',
    event: 'change'
  },
  data () {
    return {
      options: [],
      value_: null
    }
  },
  watch: {
    value: {
      handler (value) {
        this.value_ = value
        this.$emit('change', value, this.getObject(value) || [])
      },
      deep: true,
      immediate: true
    }
  },
  mounted () {
  },
  created () {
    this.getApplicationListOption()
  },
  methods: {
    getApplicationListOption () {
      getApplicationList().then(res => {
        this.options = res
      })
    },
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      )
    },
    getObject (value) {
      if (typeof value == 'string') {
        return this.options.filter(item => {
          return value == item.id
        })
      } else if (typeof value == 'object') {
        return this.options.filter(item => {
          return value.includes(item.id)
        })
      }
    },
    /** value变化时调用 */
    change (val, option) {
      this.value_ = val
      this.$emit('input', val)
      this.$emit('change', val, this.getObject(val) || [])
    },
    /** 选中时调用 */
    select (val) {
      this.$emit('select', val, this.getObject(val) || [])
    },
    /** 失去焦点的时回调 */
    blur (val) {
      this.$emit('blur', val)
    },
    /** 取消选中时调用 */
    deselect (val) {
      this.$emit('deselect', val)
    },
    /** 获得焦点时回调 */
    focus () {
      this.$emit('focus')
    },
    /** 键盘按下时回调 */
    inputKeydown (event) {
      this.$emit('inputKeydown', event)
    },
    /** 展开下拉菜单的回调 */
    dropdownVisibleChange (isopen, a) {
      this.$emit('dropdownVisibleChange', isopen)
    },
    /** 文本框值变化时回调 */
    search (val) {
      this.$emit('search', val)
    },
    /** 下拉列表滚动时的回调	 */
    popupScroll (event) {
      this.$emit('popupScroll', event)
    },
    /** 鼠标移入时回调 */
    mouseenter (event) {
      this.$emit('mouseenter', event)
    },
    /** 鼠标移出时回调 */
    mouseleave (event) {
      this.$emit('mouseleave', event)
    }
  }
}
</script>

<style lang="less" scoped>
</style>
